<template>
   <div class="main">
       <el-row>
           <el-radio-group v-model="radio">
            <el-radio-button label="东鼎-鼎天双湖畔花园"></el-radio-button>
            <el-radio-button label="旭辉运河悦章"></el-radio-button>
           </el-radio-group>
       </el-row>
       <el-row>
           <span style="color:#999999;">账单周期：2019-01-15 · 2019-02-15&nbsp; 账单已出，请于</span>
           <span style="color:#CC0000;">2月25日</span>
           <span style="color:#999999;">前还款</span>
       </el-row>
       <el-row :span="24">
            <span  class="secondtitle">本期账单：</span>
       </el-row>
       <el-row style="margin-top:15px">
            <el-col :span="5">
               <span>本期已出账单：¥36000.00</span>
            </el-col>
            <el-col :span="5" offset="3">
               <span>最低还款额：¥30000.00</span>
            </el-col>
            <el-col :span="5" offset="3">
              <span>已还：¥30000.00</span>
            </el-col>
            <el-button>立即还款</el-button>
       </el-row>
       <el-row :span="24">
            <span  class="secondtitle">上期账单：</span>
       </el-row>
        <el-row :span="24">
            <span style="color:#CC0000;">恭喜您，您的上期账单已还清</span>
        </el-row>
        <el-row style="margin-top:15px">
            <el-col :span="5">
               <span>本期已出账单：¥36000.00</span>
            </el-col>
            <el-col :span="5" offset="3">
               <span>最低还款额：¥30000.00</span>
            </el-col>
            <el-col :span="5" offset="3">
              <span>已还：¥30000.00</span>
            </el-col>
            <el-button>立即还款</el-button>
        </el-row>
        <el-row style="margin:20px;">
            <el-col :span="1">
            <img src="../assets/images/u17678.png" alt="" class="" style="float:left;width:50px;height:50px"/> 
            </el-col>
            <el-col :span="5">
           <span style="height:50px;line-height:50px">总发生订单金额：¥400000.00</span>
           </el-col>
           <el-col :span="1" offset="3">
            <img src="../assets/images/u17682.png" alt="" class="" style="float:left;width:50px;height:50px"/> 
            </el-col>
            <el-col :span="5">
           <span style="height:50px;line-height:50px">总还款金额：¥380000.00</span>
           </el-col>
        </el-row>
        <el-row :span="24">
            <el-col :span="4">
                <span  class="secondtitle">本期账单明细：</span>
            </el-col>
            <el-col :span="3" offset="17">
                 <el-link :underline='false' href="/countdetail" class="secondtitle">查看>></el-link>
            </el-col>
       </el-row>
        <el-row :span="24">
            <span  class="secondtitle">往期账单明细：</span>
        </el-row> 
        <el-row>
            <el-col :span="2">
             <span>请选择周期:</span>
             </el-col>
           <el-col :span="5"  offset="1">
            <el-date-picker type="date" placeholder="请选择周期起始时间" v-model="date1" style="width: 100%;"></el-date-picker>
            </el-col>
            <el-col class="line" :span="1" offset="1">---</el-col>
            <el-col :span="5">
            <el-date-picker type="date" placeholder="请选择周期终止时间" v-model="date2" style="width: 100%;"></el-date-picker>
            </el-col >
            <el-col :span="5" offset="2">
                <el-button class="remerber" @click="ccdetailinf()">确定</el-button>
            </el-col>
        </el-row>          
   </div> 
</template>
<script>
export default {
    data () {
      return {
        radio: '东鼎-鼎天双湖畔花园',
        date1:'',
        date2:'',
        tableData: [{
            data:'2018-11-28',
            sitename:'东鼎-鼎天双湖畔花园',
            listid:'FHD-RC20180928-001',
            huwuname:'预拌抹灰砂浆',
            carnumber:'浙AY815D',
            drivername:'张三',
            driverphone:'13157188735',
            weight:'31.4',
            zhuangtai:'运输中',
            addictions:'防冻剂*10，防冻剂...'
        },
        {
            sitename:'旭辉运河悦章',
            listid:'FHD-RC20180928-001',
            huwuname:'预拌抹灰砂浆',
            carnumber:'浙AY815D',
            drivername:'张三',
            driverphone:'13157188735',
            weight:'31.4',
            zhuangtai:'运输中',
            addictions:'防冻剂*10，防冻剂...'
        },
        {
            sitename:'旭辉运河悦章',
            listid:'FHD-RC20180928-001',
            huwuname:'预拌抹灰砂浆',
            carnumber:'浙AY815D',
            drivername:'张三',
            driverphone:'13157188735',
            weight:'31.4',
            zhuangtai:'运输中',
            addictions:'防冻剂*10，防冻剂...'
        },
        {
            sitename:'旭辉运河悦章',
            listid:'FHD-RC20180928-001',
            huwuname:'预拌抹灰砂浆',
            carnumber:'浙AY815D',
            drivername:'张三',
            driverphone:'13157188735',
            weight:'31.4',
            zhuangtai:'运输中',
            addictions:'防冻剂*10，防冻剂...'
        },
        {
            sitename:'旭辉运河悦章',
            listid:'FHD-RC20180928-001',
            huwuname:'预拌抹灰砂浆',
            carnumber:'浙AY815D',
            drivername:'张三',
            driverphone:'13157188735',
            weight:'31.4',
            zhuangtai:'运输中',
            addictions:'防冻剂*10，防冻剂...'
        },
        {
            sitename:'旭辉运河悦章',
            listid:'FHD-RC20180928-001',
            huwuname:'预拌抹灰砂浆',
            carnumber:'浙AY815D',
            drivername:'张三',
            driverphone:'13157188735',
            weight:'31.4',
            zhuangtai:'运输中',
            addictions:'防冻剂*10，防冻剂...'
        }]
      };
    },
    methods:{
        ccdetailinf(){
            window.location.href='/countdetail' 
        }
    }
}
</script>
<style src="../style/mine.css">

</style>